<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>{{articleList}}</title>
  <meta name="description" content="{{articleListDesc}}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://biyapay.io/favicon.ico">
  {{!-- 引入tailwind --}}
  <script src="/js/tailwindcss.js"></script>
  {{!-- 引入element样式 --}}
  <link rel="stylesheet" href="/style/element-ui@2.15.14.css">
</head>
<style>
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    background-color: #000;
    color: #fff;
  }
</style>

<body>
  {{> header }}
  <div class="main px-[100px] py-5">
    <div
      class="wrap relative w-full m-auto px-5 py-24 pb-15 flex flex-col justify-start items-start lg:px-20 xl:px-0 xl:w-2/3 2xl:w-1/2">
      <!-- 新的列表容器 -->
      <div class="recommended_articles mt-5">
        <h1 class="text-xl mb-3">{{t 'welcome'}}</h1>
        <li class="changeLanguageEn"><a href="/change-lang/en">English</a></li>
        <li class="changeLanguageCn"><a href="/change-lang/cn">中文</a></li>
        <br />
        <h2 class="text-xl mb-3">{{t 'recommended'}}</h2>
        <ul class="list-disc pl-5">
          {{#each record}}
          <li class="pb-2 py-5 hover:text-[#0ea5e9]">
            <a href="/article/{{this.id}}">
              {{this.title}}
            </a>
          </li>
          {{/each}}
          <!-- 下一页链接 -->
          <li class="pt-10 hover:text-[#0ea5e9]">
            <a href="/articleList/{{pageNum}}">{{t 'nextPage'}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  {{> footer }}
  <script>
    const bc = new BroadcastChannel('my-channel');
    const changeLanguageEn = document.querySelector('.changeLanguageEn');
    const changeLanguageCn = document.querySelector('.changeLanguageCn');

    changeLanguageEn.addEventListener('click', function () {
      bc.postMessage({ action: 'languageChanged', language: 'en' });
    });

    changeLanguageCn.addEventListener('click', function () {
      bc.postMessage({ action: 'languageChanged', language: 'cn' });
    });
  </script>
</body>

</html>